<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">报名详细</block>
		</cu-custom>
		<view class="bg-white">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl  ">
						<text class="iconfont icon-baomingrenshu-"></text>
					</text>
					<text>报名信息</text>
				</view>
			</view>
			<view class=" bg-white padding-sm">
				<view class="padding-xs flex justify-between align-center">
					<text>编号：</text>
					<text class="">{{aclientbm.bmid}}</text>
				</view>
				<view class="padding-xs flex justify-between align-center">
					<text>
						{{aclientbm.ct}}
					</text>
					<text class="text-red">￥{{(aclientbm.price) / 100}}</text>
				</view>
				<view class="padding-xs flex justify-end">
					<text>
						<text class="text-red" v-if="aclientbm.stu == 'P'">排队中（{{aclientbm.sort}}）</text>
						<text class="text-green" v-if="aclientbm.stu == 'B'">已报名</text>
						<text class="text-green" v-if="aclientbm.stu == 'S'">已开始</text>
						<text class="text-red" v-if="aclientbm.stu == 'F'">已结束</text>
						<text class="text-red" v-if="aclientbmm.stu == 'R'">提款中</text>
						<text class="text-green" v-if="aclientbm.stu == 'T'">已提款</text>
						<text class="text-red" v-if="aclientbm.stu == 'C'">已取消</text>
						<text class="text-green" v-if="aclientbm.stu == 'J'">退款中</text>
						<text class="text-red" v-if="aclientbm.stu == 'E'">已退款</text>
					</text>
				</view>
			</view>
		</view>




		<view class="cu-item shadow bg-white margin-top">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl  ">
						<text class="iconfont icon-jiaolian"></text>
					</text>
					<text>教练</text>
				</view>
			</view>
			<view class="cu-list menu-avatar padding">
				<view class="cu-item flex align-center ">
					<view class="cu-avatar round xl" :style="{backgroundImage: `url(${ajiaolian.cover})`}"></view>
					<view class="content flex-sub margin-left-sm">
						<view class="flex justify-between ">
							<view>{{ajiaolian.jlname}}</view>
						</view>
						<view class="flex justify-between align-center margin-top-xs">
							<uni-rate size="15" readonly="true" v-model="ajiaolian.count" max="5"></uni-rate>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl  ">
						<text class="iconfont icon-kecheng"></text>
					</text>
					<text>课程</text>
				</view>
			</view>
			<view class="bg-white">
				<view class="flex relative">
					<image class="flex-sub" :src="akecheng.cover" mode="aspectFill"></image>
					<view class="bg-red padding-sm absolute left0 bottom0">当前课程{{kczt[akecheng.zt]}}</view>
				</view>
				<view>
					<view class="padding flex justify-between">
						<text>{{akecheng.kcname}}</text>
					</view>
					<view v-if="akecheng.zt != 'C'" class="padding">
						<view class="text-gray text-sm flex justify-between">
							<text>{{akecheng.st}}~{{akecheng.et}}</text>
							<view class="text-gray text-sm">
								<text class="cuIcon-myfill">{{akecheng.ybrs}}</text>
								<text class="cuIcon-my margin-left-sm">{{akecheng.zxrs}}</text>
								<text class="cuIcon-friend margin-left-sm">{{akecheng.zdrs}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="aclientbm.stu == 'P' || aclientbm.stu == 'B'" class="padding ">
			<button @click="cancel" class="cu-btn block bg-red lg">取消</button>
		</view>
		
		<view v-if="akecheng.zt != 'C'" class="bg-white margin-top">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl  ">
						<text class="iconfont icon-yishangkekeshishu"></text>
					</text>
					<text>课程章节</text>
				</view>
			</view>
			<view>
				<view class="cu-timeline" v-for="(kechengitem,index) in akechengitems" :key="index">
					<view class="cu-time">
						<view class="flex justify-start padding-left">
							<text class="margin-right-sm">{{kechengitem.dt}}</text>
							<text>{{kechengitem.st}}</text>~
							<text>{{kechengitem.et}}</text>
						</view>
		
					</view>
					<view class="cu-item">
						<view :style="'background-image:url('+kechengitem.scover+'); background-size: 100% 100%;'">
							<view class="position-relative">
								<view class="kibackground"></view>
								<view class="padding position-relative">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-main">第{{index+1}}节</view>
										<view class="cu-tag line-main">{{kechengitem.itemname}}</view>
									</view>
									<view class="margin-top">
										<view class="text-black">{{kechengitem.sname}}</view>
										<view class="margin-top-sm flex">
											<view class="cu-avatar lg"
												:style="'background-image:url('+kechengitem.rcover+');'">
		
											</view>
											<view class="flex-treble flex align-center padding-left-sm text-black">
												{{kechengitem.rname}}
											</view>
										</view>
									</view>
								</view>
							</view>
		
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view v-if="aclientbm.stu != 'P' && aclientbm.stu != 'B' && aclientbm.stu != 'S'" 
			class=" bg-white margin-top">
			
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl  ">
						<text class="cuIcon-comment"></text>
					</text>
					<text>我的评价</text>
				</view>
			</view>
			<view class="padding-left padding-right">
				<view class="flex justify-end padding-sm align-center">
					<text>评分：</text>
					<uni-rate size="25" v-model="ajlpj.count" max="5"></uni-rate>
				</view>
				<view class="padding-bottom" v-if="ajlpj.jlpjid">
					<view
						class="cu-textarea bg-gray w-100 padding-xs">
						{{ajlpj.content}}
					</view>
				</view>
				<view v-else>
					<textarea
						class="cu-textarea bg-gray w-100 padding-xs" 
						placeholder="写下你的感受..." 
						v-model="ajlpj.content"
						maxlength="100"
						bindinput="onContentChange"></textarea>
					<view class="flex justify-end margin-top-sm">
						<text class="text-gray">{{ajlpj.content.length}}/100</text>
					</view>
					<view class="padding-top padding-bottom">
						<button  @click="comment"
							class="cu-btn block bg-green lg">发送评论</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				kczt: this.constant.kczt.KCZT,
				aclientbm: {},
				akecheng: {},
				ajiaolian: {},
				akechengitems: [],
				ajlpj: {
					content: ""
				}
			};
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		onLoad: function(option) {
			this.aclientbm.bmid = option.bmid;
			this.loadData();
		},
		methods: {
			loadData: function() {
				this.api("/client/bm/info/get").send({
					bmid: this.aclientbm.bmid
				}).then(data => {
					this.aclientbm = data.aclientbm;
					this.akecheng = data.akecheng;
					this.ajiaolian = data.ajiaolian;
					this.akechengitems = data.akechengitems;
					if (data.ajlpj) {
						this.ajlpj = data.ajlpj;
					} else {
						this.ajlpj = {
							content: "",
							clientid: this.store.state.client.clientid,
							nc: this.store.state.client.nc,
							headimg: this.store.state.client.headimg,
							jlid: this.ajiaolian.jlid,
							kcid: this.akecheng.kcid,
							count: 5,
							bmid: this.aclientbm.bmid
						}
					}
				})

			},
			cancel: function() {
				this.api("/client/bm/info/put").send({
					bmid: this.aclientbm.bmid
				}).then(data => {
					this.aclientbm = data.aclientbm;
				});
			},
			comment: function() {
				if (this.ajlpj.content.length == 0) {
					this.message.err("请填写评论");
					return;
				}
				this.api("/jl/pj").send({
					ajlpj: this.ajlpj,
				}).then(data => {
					this.ajlpj = data.ajlpj;
					this.$forceUpdate();
				});
			}

		}
	}
</script>

<style>
	.kibackground {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>